<template>
  <div class="container">
    <div class="header">
      <h1>培养计划管理</h1>
    </div>
    <div class="content">
      <a-row>
        <a-col span="2"></a-col>
        <a-col span="8" style="text-align: center">
          <a-cascader style="width: 70%; text-align: left" :options="colleges" placeholder="学院/专业"
                      @change="changeMajor"></a-cascader>
        </a-col>
        <a-col span="4" style="text-align: center">
          <span>年级：</span>
          <a-select v-model="gradeId">
            <a-select-option v-for="(grade, index) in grades" :key="index" :value="grade.id">
              {{ grade.text }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col span="6" style="text-align: center">
          <a-button type="primary" @click="loadTrainingPlan">查询</a-button>
        </a-col>
        <a-col span='4' style="text-align: center">
          <a-dropdown>
            <a-menu slot="overlay">
              <a-menu-item>
                <span @click="newPlan(1)">基于当前稍作修改</span>
              </a-menu-item>
              <a-menu-item>
                <span @click="newPlan(2)">新建空培养计划</span>
              </a-menu-item>
            </a-menu>
            <a-button>新建培养计划
              <a-icon type="down"/>
            </a-button>
          </a-dropdown>
        </a-col>
      </a-row>
      <br>
      <a-table :pagination="false" :bordered="true" :columns="trainingPlanColumns" :data-source="trainingPlans">
        <template
            v-for="col in trainingPlanColumnsWithOutOperations"
            :slot="col"
            slot-scope="text, record, index"
        >
          <div :key="col">
            <a-input
                v-if="record.editable"
                style="margin: -5px 0"
                :value="text"
                @change="e => textChange(e.target.value, record.key, col, index)"
            ></a-input>
            <template v-else>
              {{ text }}
            </template>
          </div>
        </template>
        <template slot="operation" slot-scope="text, record">
          <a-popconfirm
              v-if="trainingPlans.length && !record.editable"
              title="确定删除该行？"
              @confirm="() => deleteRow(record)"
          >
            <span class="operation">删除</span>
          </a-popconfirm>
          <span v-else></span>
          <span v-if="record.editable">
              <span class="operation" style="margin-right: 8px" @click="() => save(record.key)">保存</span>
              <a-popconfirm title="确定取消？" @confirm="() =>cancel(record.key)">
                  <a class="operation">取消</a>
              </a-popconfirm>
            </span>
          <span v-else>
              <a style="font-size: small" :disabled="editingKey !== ''" @click="() =>edit(record.key)">编辑</a>
            </span>
        </template>
      </a-table>
      <br/>
      <div style="text-align: right; width: 100%">
        <a-button @click="addRow">添加一行</a-button>
        <a-button @click="updateTrainingPlan('put')" style="margin-left: 30px">保存修改</a-button>
      </div>
    </div>
    <a-modal
        :visible="addTrainingPlanModalShow"
        title="新增培养计划"
        :keyboard="false"
        :closable="false"
        :maskClosable="false"
        @cancel="closeModal"
        :width="1100"
        :maskStyle="{'background-color': 'rgba(0,0,0,1)'}"
        @ok="okModal"
    >
      <a-row>
        <a-col span="12" style="text-align: center">
          <a-cascader style="width: 70%; text-align: left" :options="colleges" placeholder="学院/专业"
                      @change="changeMajor"></a-cascader>
        </a-col>
        <a-col span="12" style="text-align: center">
          <span>年级：</span>
          <a-select v-model="gradeId">
            <a-select-option v-for="(grade, index) in grades" :key="index" :value="grade.id">
              {{ grade.text }}
            </a-select-option>
          </a-select>
        </a-col>
      </a-row>
      <br/>
      <a-table :pagination="false" :bordered="true" :columns="trainingPlanColumns" :data-source="trainingPlans">
        <template
            v-for="col in trainingPlanColumnsWithOutOperations"
            :slot="col"
            slot-scope="text, record, index"
        >
          <div :key="col">
            <a-input
                v-if="record.editable"
                style="margin: -5px 0"
                :value="text"
                @change="e => textChange(e.target.value, record.key, col, index)"
            ></a-input>
            <template v-else>
              {{ text }}
            </template>
          </div>
        </template>
        <template slot="operation" slot-scope="text, record">
          <a-popconfirm
              v-if="trainingPlans.length && !record.editable"
              title="确定删除该行？"
              @confirm="() => deleteRow(record)"
          >
            <span class="operation">删除</span>
          </a-popconfirm>
          <span v-if="record.editable">
              <span class="operation" style="margin-right: 8px" @click="() => save(record.key)">保存</span>
              <a-popconfirm title="确定取消？" @confirm="() =>cancel(record.key)">
                  <a class="operation">取消</a>
              </a-popconfirm>
            </span>
          <span v-else>
              <a style="font-size: small" :disabled="editingKey !== ''" @click="() =>edit(record.key)">编辑</a>
            </span>
        </template>
      </a-table>
      <br/>
      <div style="text-align: right; width: 100%">
        <a-button @click="addRow">添加一行</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import {columns} from "@/pages/student/js/scoreQuery";
import {methods} from "@/pages/schoolAdmin/js/methods";

export default {
  name: "trainingPlanManagement",
  mounted() {
    // 保存可以修改的列
    for (let col of columns.trainingPlanColumns) {
      this.trainingPlanColumnsWithOutOperations.push(col.dataIndex);
      this.trainingPlanColumns.push(col);
    }
    // 给每一列添加scopedSlots
    for (let col of this.trainingPlanColumns) {
      col.scopedSlots = {
        customRender: col.dataIndex
      }
    }
    this.loadCollegeInfo();
    // 给每一行添加操作列
    this.trainingPlanColumns.push({
      title: "操作",
      dataIndex: "operation",
      scopedSlots: {customRender: 'operation'},
    })
  },
  data() {
    return {
      colleges: [],
      grades: [],
      trainingPlanColumns: [],
      trainingPlanColumnsWithOutOperations: [],
      majorId: "",
      gradeId: -1,
      trainingPlans: [],
      trainingPlanName: "",
      editingKey: "",
      cacheData: [],
      addTrainingPlanModalShow: false,
      oldTrainingPlan: [],
    }
  },
  methods: methods
}
</script>

<style scoped src="./css/trainingPlan.css"></style>
<style scoped src="./css/common.css"></style>